<template>
  <div class="">
    <Catgory></Catgory>
    <el-card style="margin: 10px 0px">
      <el-button type="primary" size="default" icon="Plus"  :disabled="categoryStore.c3Id ? false : true">添加属性</el-button>
      <el-table border style="margin:10px 0px" :data="attrArr">
                    <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
                    <el-table-column label="属性名称" width="120px" prop="attrName"></el-table-column>
                    <el-table-column label="属性值名称">
                        <template #="{ row, $index }">
                            <el-tag style="margin:5px" v-for="(item, index) in row.attrValueList" :key="item.id">{{
                                item.valueName }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120px">
                        <!-- row：已有的属性对象 -->
                        <template #="{ row, $index }">
                            <!-- 修改已有属性的按钮 -->
                            <el-button type="primary" size="small" icon="Edit"></el-button>
                            <el-popconfirm :title="`你确定删除${row.attrName}?`" width="200px" >
                                <template #reference>
                                    <el-button type="primary" size="small" icon="Delete"></el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
    </el-card>
  </div>
</template>

<script lang="ts"  setup>
import {watch,ref} from "vue";
import { } from "vue-router";
import { reqAttrInfoList } from '@/api/product/attr/index.ts' 
import useCategoryStore from '@/store/modules/category.ts'
import type {AttrResponseData, Attr, AttrValue} from '@/api/product/attr/types.ts'
let categoryStore = useCategoryStore();
let attrArr = ref<Attr[]>([]);
watch(() => categoryStore.c3Id, () => { 
  attrArr.value = [];
  if (!categoryStore.c3Id) return;
    getinfoList();
})

const getinfoList = async () => {
  const { c1Id, c2Id, c3Id } = categoryStore;
  let result:AttrResponseData = await reqAttrInfoList(c1Id, c2Id, c3Id);
  console.log(result, '王世彪列表');
  if (result.code == 200) {
    attrArr.value = result.data;
  }
}
</script>

<style lang="scss" scoped>
</style>